<template>
  <el-row :gutter="24">
    <el-col :span="6">
      <FileList :filedata="filedata" @viewfile="viewfile"></FileList>
    </el-col>

    <el-col :span="14">
      <el-card class="right">
        <MdEditor ref="editorRef" :editorId="id" :modelValue="text" />
      </el-card>
    </el-col>

    <el-col :span="4">
      <el-card>
        <MdCatalog :editorId="id" :scrollElement="scrollElement" />
      </el-card>
    </el-col>

  </el-row>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import '@vavt/v3-extension/lib/asset/ExportPDF.css';
import { MdEditor, MdCatalog } from 'md-editor-v3';
import axios from "axios"
import 'md-editor-v3/lib/style.css';
// import 'md-editor-v3/lib/preview.css';
import FileList from "@/components/FileList.vue"
import type { ExposeParam } from 'md-editor-v3';
import type { MdFile } from '@/model/dataModel';
import { getFileData } from '@/api/fileApi';


const editorRef = ref<ExposeParam>()
const id = ref<string>("idabc")


//点击某个markdown文件名，显示文件内容
let scrollElement = ref<any>()
let text = ref<string>()

//渲染markdown文件的方法
const viewfile = (md:MdFile)=>{
  axios.get(md.path).then(response => {
    text.value = response.data
    md.data = response.data
    scrollElement.value = document.documentElement;
  }).catch(error => {
    console.log("加载md文件失败", error)
  })
}

let filedata = reactive<Array<MdFile>>([])
//初始化文件列表
onMounted(() => {
  getFileData(filedata)
})


</script>
<style scoped lang="scss">
</style>